<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="images/dzlogo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康管理中心</title>
    <link rel="stylesheet" href="JKstyle.css">
    <link rel="stylesheet" href="ai-chat.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航 -->
<nav class="top-nav">
    <div class="nav-left">
        <img src="images/dzlogo.png" alt="Logo" class="logo">
        <h1>健康管理中心</h1>
    </div>
    <div class="nav-right">
        <span class="user-info">
            <i class="fas fa-user-circle"></i>
            账号： admin
        </span>
        <button class="logout-btn" onclick="logout()">
            <i class="fas fa-sign-out-alt"></i>
            退出
        </button>
    </div>
</nav>

    <div class="container">
        <!-- 左侧菜单 -->
        <aside class="sidebar">
            <div class="menu-group">
                <div class="menu-title">用户管理</div>
                <ul>
                    <li class="active" onclick="loadContent('partialshtml/user_list.html', this)"><i class="fas fa-users"></i> 用户列表</li>
                </ul>
            </div>
            <div class="menu-group">
                <div class="menu-title">数据统计</div>
                <ul>
                    <li onclick="loadContent('partialshtml/health_trends.html', this)"><i class="fas fa-chart-line"></i> 健康趋势</li>
                    <li onclick="loadContent('partialshtml/data_analysis.html', this)"><i class="fas fa-chart-pie"></i> 数据分析</li>
                </ul>
            </div>
        </aside>

        <!-- 主要内容区 (将作为动态内容的容器) -->
        <main id="main-content" class="main-content">
            <!-- 内容将通过 JavaScript 动态加载 -->
        </main>
    </div>

    <!-- 报告模态框 -->
    <div id="reportModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">报告列表</h3>
                <button class="close-btn" onclick="closeReportModal()">&times;</button>
            </div>
            <div class="modal-body">
                <table class="report-table">
                    <thead>
                        <tr>
                            <th>测评日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="reportList"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 睡眠报告列表模态框 -->
    <div id="sleepReportModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>睡眠报告列表</h3>
                <button class="close-btn" onclick="closeSleepReportModal()" aria-label="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <table class="report-table">
                    <thead>
                        <tr>
                            <th>测评日期</th>
                            <th>报告类型</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="sleepReportList"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 导航报告列表模态框 -->
    <div id="navigationReportModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>导航报告列表</h3>
                <button class="close-btn" onclick="closeNavigationReportModal()" aria-label="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <table class="report-table">
                    <thead>
                        <tr>
                            <th>测评日期</th>
                            <th>报告类型</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="navigationReportList"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 报告选择模态框 -->
    <div id="detailedReportModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>选择查看报告类型</h3>
                <button class="close-btn" onclick="closeDetailedReportModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="report-details">
                    <h3>请选择要查看的报告类型</h3>
                    <div class="report-content">
                        <div class="report-selector">
                            <label for="reportType">报告类型:</label>
                            <select id="reportType" class="report-select">
                                <option value="">请选择报告类型</option>
                                <option value="sleep">睡眠报告</option>
                                <option value="navigation">导航报告</option>
                            </select>
                        </div>
                        <div class="report-actions">
                            <button id="viewReportBtn" class="view-report-btn" onclick="viewSelectedReport()" disabled>
                                查看报告
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 客户档案模态框 -->
    <div id="profileModal" class="modal-overlay" style="display: none;">
        <div class="modal-content profile-modal-content">
            <div class="modal-header">
                <h3>客户档案表</h3>
                <span id="profileFilingDate"></span>
                <button class="close-btn" onclick="closeProfileModal()">&times;</button>
            </div>
            <form id="profileForm" onsubmit="saveProfile(event)">
                <input type="hidden" id="profileUserId">
                <div class="profile-modal-body">
                    <div class="profile-grid">
                        <div class="form-field"><span>姓名:</span><p id="profileName" class="readonly-field"></p></div>
                        <div class="form-field"><span>性别:</span><p id="profileGender" class="readonly-field"></p></div>
                        <div class="form-field"><span>出生日期:</span><input type="date" id="profileDob"></div>
                        <div class="form-field full-width"><span>电话:</span><p id="profilePhone" class="readonly-field"></p></div>
                        <div class="form-field full-width"><span>住址:</span><input type="text" id="profileAddress"></div>

                        <div class="form-field"><span>有何种疾病:</span><input type="text" id="profileDiseases"></div>
                        <div class="form-field" colspan="2"><span>病史:</span><input type="text" id="profileMedicalHistory"></div>
                        <div class="form-field"><span>调理原因:</span><input type="text" id="profileConditioningReason"></div>
                        
                        <div class="form-field"><span>身高(cm):</span><input type="number" id="profileHeight"></div>
                        <div class="form-field"><span>体重(kg):</span><input type="number" id="profileWeight"></div>
                        <div class="form-field"><span>BMI:</span><p id="profileBmi" class="readonly-field"></p></div>

                        <div class="form-field full-width"><span>用药情况:</span><input type="text" id="profileMedicationStatus"></div>
                        
                        <div class="form-field" colspan="3">
                            <span>调理内容:</span>
                            <div class="checkbox-group">
                                <label><input type="checkbox" name="conditioningContent" value="糖代谢"> 糖代谢</label>
                                <label><input type="checkbox" name="conditioningContent" value="亚健康"> 亚健康</label>
                                <label><input type="checkbox" name="conditioningContent" value="其他"> 其他</label>
                            </div>
                        </div>

                        <div class="form-field" colspan="3">
                            <span>血压:</span>
                            <div class="inline-inputs">
                                <label>收缩压:</label><input type="number" id="profileSystolic">
                                <label>舒张压:</label><input type="number" id="profileDiastolic">
                            </div>
                        </div>

                        <div class="form-field"><span>空腹血糖:</span><input type="number" step="0.1" id="profileFastingSugar"></div>
                        <div class="form-field" colspan="2"><span>糖化血红蛋白:</span><input type="number" step="0.1" id="profileGlycatedHemoglobin"></div>

                        <div class="form-field"><span>自我管理情况:</span><input type="text" id="profileSelf_management_status"></div>
                        <div class="form-field"><span>交费情况:</span><input type="text" id="profilePaymentStatus"></div>
                        <div class="form-field"><span>预计时间:</span><input type="text" id="profileEstimatedTime"></div>

                        <div class="form-field full-width" colspan="3"><span>其他:</span><textarea id="profileOtherNotes"></textarea></div>

                        <div class="form-field"><span>填表人:</span><input type="text" id="profileFiller"></div>
                        <div class="form-field"><span>客户来源:</span><input type="text" id="profileClientSource"></div>
                        <div class="form-field"><span>安排时间:</span><input type="datetime-local" id="profileScheduledTime"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeProfileModal()">取消</button>
                    <button type="submit" class="btn-save">保存档案</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- ECharts统一加载器 -->
    <script src="echarts-loader.js"></script>
    <!-- 预加载ECharts库，提升图表页面打开速度 -->
    <script>
        // 页面加载完成后立即预加载ECharts
        document.addEventListener('DOMContentLoaded', function() {
            // 延迟1秒后预加载，避免影响首屏加载
            setTimeout(() => {
                if (window.EChartsLoader) {
                    window.EChartsLoader.loadECharts().then(() => {
                        console.log('✨ ECharts预加载完成，图表将快速显示');
                    }).catch(err => {
                        console.warn('⚠️ ECharts预加载失败:', err);
                    });
                }
            }, 1000);
        });
    </script>
    <!-- 性能优化配置 -->
    <script src="performance-config.js"></script>
    <script>
        // 预连接到Supabase服务器和CDN，减少连接时间
        const preconnectUrls = [
            'https://gxohpxiekmpsmkzkcxfc.supabase.co',  // Supabase服务器
            'https://unpkg.com',  // unpkg CDN (国内访问较快)
            'https://cdn.jsdelivr.net'  // jsdelivr CDN 备用
        ];
        
        preconnectUrls.forEach(url => {
            const linkPreconnect = document.createElement('link');
            linkPreconnect.rel = 'preconnect';
            linkPreconnect.href = url;
            linkPreconnect.crossOrigin = 'anonymous';
            document.head.appendChild(linkPreconnect);
        });

        // DNS预解析
        const dnsPrefetchUrls = [
            '//gxohpxiekmpsmkzkcxfc.supabase.co',
            '//unpkg.com',
            '//cdn.jsdelivr.net'
        ];
        
        dnsPrefetchUrls.forEach(url => {
            const linkDnsPrefetch = document.createElement('link');
            linkDnsPrefetch.rel = 'dns-prefetch';
            linkDnsPrefetch.href = url;
            document.head.appendChild(linkDnsPrefetch);
        });

        // 预加载主脚本
        const linkPreload = document.createElement('link');
        linkPreload.rel = 'preload';
        linkPreload.href = 'JKscript.js';
        linkPreload.as = 'script';
        document.head.appendChild(linkPreload);

        // 初始化性能监控
        window.addEventListener('load', function() {
            if (window.PerformanceConfig && typeof window.PerformanceConfig.initPerformanceOptimizations === 'function') {
                window.PerformanceConfig.initPerformanceOptimizations();
            }

            console.log('🚀 页面加载完成，性能优化已启用');
        });
    </script>
    
    <!-- 报告选择器功能 -->
    <script>
        // 添加下拉框变化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            const reportSelect = document.getElementById('reportType');
            const viewButton = document.getElementById('viewReportBtn');
            
            if (reportSelect && viewButton) {
                reportSelect.addEventListener('change', function() {
                    // 当选择了报告类型时，启用按钮
                    viewButton.disabled = !this.value;
                });
            }
        });
        
        // 查看选中的报告
        function viewSelectedReport() {
            const reportType = document.getElementById('reportType').value;
            
            if (!reportType) {
                alert('请先选择报告类型');
                return;
            }
            
            // 关闭当前模态框
            closeDetailedReportModal();
            
            // 根据选择的报告类型打开相应的页面
            if (reportType === 'sleep') {
                // 睡眠报告 - 在新标签页中打开本地报告
                window.open('partialshtml/Roomreport.html', '_blank');
            } else if (reportType === 'navigation') {
                // 导航报告 - 在新标签页中打开PDF文件
                window.open('https://lifetide.oss-cn-beijing.aliyuncs.com/upload/room/data/2025/2/12/601-2405294827-20250212141706891-2104240009.pdf', '_blank');
            }
        }
        
        // 关闭报告选择模态框
        function closeDetailedReportModal() {
            const modal = document.getElementById('detailedReportModal');
            if (modal) {
                modal.style.display = 'none';
                // 重置选择框
                const reportSelect = document.getElementById('reportType');
                const viewButton = document.getElementById('viewReportBtn');
                if (reportSelect) reportSelect.value = '';
                if (viewButton) viewButton.disabled = true;
            }
        }
    </script>
    
    <script src="JKscript.js"></script>
    <!-- AI聊天组件 -->
    <script src="ai-chat-config.js"></script>
    <script src="ai-chat.js" defer></script>
</body>
</html>